<template>
  <div v-loading="loading">
    <a-form-model ref="wechatForm" :rules="rules" :model="params" :labelCol="{ span: 3 }" :wrapperCol="{ span: 6 }">
      <div class="level_title">基础设置</div>
      <a-form-model-item label="是否允许切换店铺" prop="one_store_switch_store">
        <a-radio-group v-model="params.one_store_switch_store">
          <a-radio :value="true">开启</a-radio>
          <a-radio :value="false">关闭</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="请选择默认店铺" prop="one_store_default_store">
        <a-select v-model="params.one_store_default_store" allowClear :filter-option="filterOption" show-search>
          <a-select-option :value="item.id" v-for="item in storeList" :key="item.id">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="是否隐藏申请店铺" prop="one_store_hide_apply">
        <a-radio-group v-model="params.one_store_hide_apply">
          <a-radio value="1">开启</a-radio>
          <a-radio value="0">关闭</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <div class="level_title" style="border-top: 1px solid #e9e9e9; padding-top: 25px">微信设置</div>
      <a-alert message="此配置用于单店铺模式微信小程序" type="info" show-icon style="margin: 10px 0 20px 0" />
      <a-form-model-item label="审核模式" prop="one_store_is_shenhe">
        <a-switch v-model="params.one_store_is_shenhe" />
      </a-form-model-item>
      <a-form-model-item label="小程序AppId" prop="one_store_wechat_appid">
        <a-input v-model="params.one_store_wechat_appid" type="text" />
      </a-form-model-item>
      <a-form-model-item label="小程序Secret" prop="one_store_wechat_secret">
        <a-input v-model="params.one_store_wechat_secret" type="text" />
      </a-form-model-item>
      <a-form-model-item label="商户号" prop="one_store_mch_id">
        <a-input v-model="params.one_store_mch_id" type="text" />
      </a-form-model-item>
      <a-form-model-item label="APIv2密钥" prop="one_store_pay_key">
        <a-input v-model="params.one_store_pay_key" type="text" />
      </a-form-model-item>
      <a-form-model-item label="Apiclient_cert" prop="one_store_apiclient_cert">
        <a-textarea v-model="params.one_store_apiclient_cert" :rows="4" />
      </a-form-model-item>
      <a-form-model-item label="Apiclient_key" prop="one_store_apiclient_key">
        <a-textarea v-model="params.one_store_apiclient_key" :rows="4" />
      </a-form-model-item>
      <div class="level_title">支付宝设置</div>
      <a-alert message="此配置用于单店铺模支付宝小程序" type="info" show-icon style="margin: 10px 0 20px 0" />
      <a-form-model-item label="审核模式">
        <a-switch v-model="params.alipay.one_store_is_shenhe" />
      </a-form-model-item>
      <a-form-model-item label="支付宝AppId">
        <a-input v-model="params.alipay.app_id" type="text" />
      </a-form-model-item>
      <a-form-model-item label="User ID">
        <a-input v-model="params.alipay.user_id" type="text" />
      </a-form-model-item>
      <a-form-model-item label="支付宝商户名称">
        <a-input v-model="params.alipay.name" type="text" />
      </a-form-model-item>
      <a-form-model-item label="Aes Key">
        <a-input v-model="params.alipay.aes_key" type="text" />
      </a-form-model-item>
      <a-form-model-item label="支付宝公钥">
        <a-input v-model="params.alipay.alipay_public_key" :autoSize="{ minRows: 4, maxRows: 6 }" type="textarea" />
      </a-form-model-item>
      <a-form-model-item label="应用公钥">
        <a-input v-model="params.alipay.app_public_key" :autoSize="{ minRows: 4, maxRows: 6 }" type="textarea" />
      </a-form-model-item>
      <a-form-model-item label="应用私钥">
        <a-input v-model="params.alipay.app_private_key" :autoSize="{ minRows: 4, maxRows: 6 }" type="textarea" />
      </a-form-model-item>

      <div class="level_title" style="border-top: 1px solid #e9e9e9; padding-top: 25px">APP设置</div>
      <a-alert message="此配置用于单店铺模式app配置" type="info" show-icon style="margin: 10px 0 20px 0" />
      <a-form-model-item label="appAppId">
        <a-input v-model="params.one_store_app_wechat_appid" type="text" />
      </a-form-model-item>
      <a-form-model-item label="appSecret">
        <a-input v-model="params.one_store_app_wechat_secret" type="text" />
      </a-form-model-item>
      <a-form-model-item label="商户号">
        <a-input v-model="params.one_store_app_mch_id" type="text" />
      </a-form-model-item>
      <a-form-model-item label="APIv2密钥">
        <a-input v-model="params.one_store_app_pay_key" type="text" />
      </a-form-model-item>
      <a-form-model-item label="Apiclient_cert">
        <a-textarea v-model="params.one_store_app_apiclient_cert" :rows="4" />
      </a-form-model-item>
      <a-form-model-item label="Apiclient_key">
        <a-textarea v-model="params.one_store_app_apiclient_key" :rows="4" />
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 24 }">
        <a-divider style="margin: 0 0 40px 0" />
        <div style="display: flex; justify-content: center">
          <a-button :loading="btnLoading" type="primary" @click="onSave" style="margin-right: 8px"> 保存 </a-button>
          <a-button @click="$router.back()"> 取消 </a-button>
        </div>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>
<script>
import { getOneStoreWechatSetting, setOneStoreWechatSetting } from '@/api/saas/setting'
import { wechatMpCardList } from '@/api/wechartVipCard'

export default {
  name: 'OneStoreSettingWechat',
  components: {},
  data() {
    return {
      loading: false,
      storeList: [],
      btnLoading: false,
      params: {
        one_store_wechat_appid: '',
        one_store_wechat_secret: '',
        one_store_mch_id: '',
        one_store_pay_key: '',
        one_store_apiclient_cert: '',
        one_store_apiclient_key: '',
        one_store_is_shenhe: false,
        one_store_switch_store: false,
        one_store_hide_apply: '1',
        alipay: {
          app_id: '',
          user_id: '',
          name: '',
          aes_key: '',
          alipay_public_key: '',
          app_public_key: '',
          app_private_key: '',
          one_store_is_shenhe: false,
        },

        one_store_app_wechat_appid: '',
        one_store_app_wechat_secret: '',
        one_store_app_mch_id: '',
        one_store_app_pay_key: '',
        one_store_app_apiclient_cert: '',
        one_store_app_apiclient_key: '',
      },
      rules: {
        one_store_wechat_appid: [{ required: true, message: '请输入AppId', trigger: 'blur' }],
        one_store_wechat_secret: [{ required: true, message: '请输入Secret', trigger: 'blur' }],
        one_store_mch_id: [{ required: true, message: '请输入商户号', trigger: 'blur' }],
        one_store_pay_key: [{ required: true, message: '请输入APIv2密钥', trigger: 'blur' }],
        one_store_apiclient_cert: [{ required: true, message: '请输入apiclient_cert', trigger: 'blur' }],
        one_store_apiclient_key: [{ required: true, message: '请输入apiclient_key', trigger: 'blur' }],
      },
    }
  },
  created() {
    this.getData()
  },

  computed: {
    copyStoreList() {
      let { storeList, form } = this
      if (!form.from_store_id) {
        return storeList
      }

      if (form.from_store_id === form.to_store_id) {
        this.form.to_store_id = ''
      }
      return storeList.filter((el) => el.id !== form.from_store_id)
    },

    geStoreName() {
      return (id) => {
        let { storeList } = this,
          item = storeList.find((el) => el.id === id)

        return item ? item.name : ''
      }
    },
  },
  methods: {
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    onSave() {
      this.$refs.wechatForm.validate((valid) => {
        if (valid) {
          this.btnLoading = true
          setOneStoreWechatSetting(this.params)
            .then((res) => {
              if (res.code == 0) {
                this.$message.success('保存成功！')
              } else {
                this.$message.warning(res.msg ? res.msg : '保存失败！')
              }
            })
            .catch((error) => {
              console.log(error)
            })
            .then(() => {
              this.btnLoading = false
            })
        }
      })
    },
    getData: function () {
      this.loading = true
      getOneStoreWechatSetting({})
        .then((res) => {
          if (res.code == 0) {
            this.params = res.data
          }
        })
        .catch((error) => {
          console.log(error)
        })
        .then(() => {
          this.loading = false
        })
    },
  },

  async mounted() {
    const res = await wechatMpCardList()
    if (res.code == 0) {
      this.storeList = res.store_list || []
    }
  },
}
</script>
<style lang="less" scoped>
.level_title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin: 10px 0 20px 0;
}
</style>
